<template>
  <div>
    <van-row>
      <van-col span="6"><lef></lef></van-col>
      <van-col span="18">
        <van-row>
          <van-col span="24"><headers></headers></van-col>
        </van-row>
        <van-row>
          <van-col span="9">
            <van-field
                v-model="name"
                name="name"
                label="角色名称"
                placeholder="请输入角色名称"
                :rules="[{ required: true, message: '请输入角色名称' }]"
            /> </van-col>
          <van-col span="3"><van-button type="info">查询</van-button></van-col>
          <van-col span="5"><van-button disabled type="primary">重置</van-button>
          </van-col>

        </van-row>
        <van-row>
          <van-col span="2">
            <van-button type="info" @click="add_show">新增</van-button>
            <div v-show="is_show">
              <van-button plain type="primary" @click="ss">取消</van-button>
              <form action="" @submit.prevent="addd">
                <p>角色名称: <input type="text" v-model="form1.name"></p>
                <p>角色编码: <input type="text" v-model="form1.code"></p>
                <button type="submit">提交</button>
              </form>
            </div>
          </van-col>
          <van-col span="2">
            <van-button disabled type="primary">导出</van-button>
          </van-col>
          <van-col span="2">
            <van-uploader :after-read="afterRead" multiple accept=".xls">导入</van-uploader>
          </van-col>
        </van-row>
        <van-row>
          <table border="1" cellspacing="0">
            <tr>
              <td><input type="checkbox"></td>
              <td>序号</td>
              <td>角色名称</td>
              <td>角色编码</td>
              <td>操作</td>
            </tr>
            <tr v-for="i in rolelist" :key="i.id">
              <td><input type="checkbox"></td>
              <td>{{i.id}}</td>
              <td>{{i.name}}</td>
              <td>{{i.code}}</td>
              <td>
                <button @click="role_del(i.id)">删除</button></td>
            </tr>
          </table>
        </van-row>
        <van-row>
          <ul>
            <li v-for="i in userlist" :key="i.id">{{i.id}}--{{i.name}}--{{i.mobile}}--
              <select name="" id="" v-model="rid">
                <option :value="j.id" v-for="j in rolelist" :key="j.id">{{j.name}}</option>


              </select><span @click="addrole()">配置角色</span>
              </li>
          </ul>
        </van-row>
      </van-col>
    </van-row>


  </div>
</template>

<script>
import myaxios from "@/http/axios";
import Lef from "@/components/veiw/lef";
import Headers from "@/components/veiw/headers";
export default {
  name: "role",
  components: {Headers, Lef},
  data() {
    return {
      data1: '',
      name:'',
      code:'',
      is_show:false,
      form1:{},
      rolelist:[],
      userlist:[],
      userid:localStorage.getItem('userid'),
      rid:0
    }
  },
  methods: {
    add_show(){
      this.is_show = true
    },
    ss(){
      this.is_show = false
    },
    addd(){
      myaxios('roles','post',this.form1).then(res=>{
        alert(res.msg)
        this.is_show = false
        this.get_bumen()
      })
    },
    get_roles(){
      myaxios('roles','get').then(res=>{
        this.rolelist = res.list
        this.getusers()
      })
    },
    role_del(id){
      myaxios('roles','delete',id).then(res=>{
        alert(res.msg)
      })
    },
    getusers(){
      myaxios('getusers','get').then(res=>{
          this.userlist = res.list
      })
    },
    addrole(){
      alert(this.rid)
      myaxios('user_role?userid='+this.userid+'&rid='+this.rid,'get').then(res=>{
        alert(res.msg)
      })
    }
  },
  mounted() {
      this.get_roles()
  }
}
</script>

<style scoped>

</style>